<template>
  <div class="scene-container">
    <!-- 3D场景容器 -->
    <div ref="sceneRef" class="scene-canvas"></div>
    
    <!-- 高级控制器 -->
    <Controls 
      :position="position"
      :rotation="rotation"
      :speed="speed"
      @move-forward="moveForward"
      @move-backward="moveBackward"
      @turn-left="turnLeft"
      @turn-right="turnRight"
      @reset-position="resetPosition"
      @toggle-fullscreen="toggleFullscreen"
      @toggle-wireframe="toggleWireframe"
    />

    <!-- 加载界面 -->
    <div v-if="loading" class="loading-screen">
      <div class="loading-content">
        <h2>加载中...</h2>
        <div class="loading-bar">
          <div class="loading-progress" :style="{ width: loadingProgress + '%' }"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import Controls from './Controls.vue'
import bz1Image from '@/assets/bz1.jpg'

// 响应式数据
const router = useRouter()
const sceneRef = ref<HTMLDivElement>()
const loading = ref(true)
const loadingProgress = ref(0)

// 场景状态
const position = reactive({ x: 0, z: 0 })
const rotation = ref(0)
const speed = ref(0)

// Three.js 对象
let scene: THREE.Scene
let camera: THREE.PerspectiveCamera
let renderer: THREE.WebGLRenderer
let controls: OrbitControls
let animationId: number

// 展厅尺寸
const SHOWROOM_SIZE = 20
const WALL_HEIGHT = 4
const WALL_THICKNESS = 0.2

// 初始化场景
const initScene = () => {
  // 创建场景
  scene = new THREE.Scene()
  scene.background = new THREE.Color(0xf0f0f0)

  // 获取容器尺寸
  const container = sceneRef.value
  const containerWidth = container ? container.clientWidth : window.innerWidth
  const containerHeight = container ? container.clientHeight : window.innerHeight

  // 创建相机
  camera = new THREE.PerspectiveCamera(
    75,
    containerWidth / containerHeight,
    0.1,
    1000
  )
  camera.position.set(0, 2, 5)

  // 创建渲染器
  renderer = new THREE.WebGLRenderer({ antialias: true })
  renderer.setSize(containerWidth, containerHeight)
  renderer.shadowMap.enabled = true
  renderer.shadowMap.type = THREE.PCFSoftShadowMap

  // 添加到DOM
  if (sceneRef.value) {
    sceneRef.value.appendChild(renderer.domElement)
  }

  // 添加点击事件监听器
  renderer.domElement.addEventListener('click', handleMouseClick)

  // 创建控制器
  controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true
  controls.dampingFactor = 0.05
  controls.maxPolarAngle = Math.PI / 2
  controls.minDistance = 2
  controls.maxDistance = 20

  // 添加光源
  addLights()
  
  // 添加真实背景 (选择其中一种方案)
  addRealisticBackground() // 简单图片背景
  // addEnvironmentMap() // 环境贴图背景 (高级方案)

  // 创建展厅
  createShowroom()

  // 开始渲染循环
  animate()
}

// 添加光源
const addLights = () => {
  // 环境光
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.6)
  scene.add(ambientLight)

  // 方向光
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8)
  directionalLight.position.set(10, 10, 5)
  directionalLight.castShadow = true
  directionalLight.shadow.mapSize.width = 2048
  directionalLight.shadow.mapSize.height = 2048
  scene.add(directionalLight)

  // 点光源
  const pointLight = new THREE.PointLight(0xffffff, 0.5, 100)
  pointLight.position.set(0, 8, 0)
  scene.add(pointLight)
}

// 添加真实背景
const addRealisticBackground = () => {
  // 方案1：简单图片背景 (推荐新手使用)
  const textureLoader = new THREE.TextureLoader()
  
  // 加载背景图片
  textureLoader.load('/textures/museum-background.jpg', (texture) => {
    // 设置场景背景
    scene.background = texture
    
    // 调整环境光强度以配合新背景
    const ambientLight = scene.children.find(child => child instanceof THREE.AmbientLight) as THREE.AmbientLight
    if (ambientLight) {
      ambientLight.intensity = 0.5
    }
  }, undefined, (error) => {
    console.log('背景图片加载失败，使用默认背景:', error)
    // 如果加载失败，使用渐变色背景
    scene.background = new THREE.Color(0x87CEEB) // 天蓝色
  })
}

// 添加环境贴图背景 (高级方案)
const addEnvironmentMap = () => {
  // 创建纹理加载器
  const textureLoader = new THREE.TextureLoader()
  
  // 加载环境贴图 (使用立方体贴图)
  const cubeTextureLoader = new THREE.CubeTextureLoader()
  
  // 博物馆风格的环境贴图
  const environmentMap = cubeTextureLoader.load([
    '/textures/px.jpg', // 右
    '/textures/nx.jpg', // 左
    '/textures/py.jpg', // 上
    '/textures/ny.jpg', // 下
    '/textures/pz.jpg', // 前
    '/textures/nz.jpg'  // 后
  ])
  
  // 设置场景背景
  scene.background = environmentMap
  
  // 设置环境贴图用于光照
  scene.environment = environmentMap
  
  // 调整环境光强度以配合新背景
  const ambientLight = scene.children.find(child => child instanceof THREE.AmbientLight) as THREE.AmbientLight
  if (ambientLight) {
    ambientLight.intensity = 0.4 // 降低环境光强度
  }
}

// 创建展厅
const createShowroom = () => {
  // 创建现代化展厅
  createModernShowroom()
  
  // 添加展柜和展板
  createDisplayCases()
  createDisplayPanels()
  
  // 添加圆形通道
  createCircularPath()
}

// 创建现代化展厅
const createModernShowroom = () => {
  // 木质地板 - 抛光木地板效果
  createWoodenFloor()
  
  // 弧形墙壁系统
  createCurvedWalls()
  
  // 大窗户系统
  createLargeWindows()
  
  // 天花板和照明
  createCeilingAndLighting()
}

// 创建木质地板
const createWoodenFloor = () => {
  // 主地板
  const floorGeometry = new THREE.PlaneGeometry(SHOWROOM_SIZE, SHOWROOM_SIZE)
  const floorMaterial = new THREE.MeshLambertMaterial({ 
    color: 0x8B4513, // 棕色木质
    transparent: true,
    opacity: 0.9
  })
  const floor = new THREE.Mesh(floorGeometry, floorMaterial)
  floor.rotation.x = -Math.PI / 2
  floor.receiveShadow = true
  scene.add(floor)
  
  // 添加木地板纹理效果
  for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
      const plankGeometry = new THREE.PlaneGeometry(1.8, 0.2)
      const plankMaterial = new THREE.MeshLambertMaterial({ 
        color: 0x8B4513,
        transparent: true,
        opacity: 0.8
      })
      const plank = new THREE.Mesh(plankGeometry, plankMaterial)
      plank.rotation.x = -Math.PI / 2
      plank.position.set(-9 + i * 1.9, 0.01, -9 + j * 1.9)
      scene.add(plank)
    }
  }
}

// 创建弧形墙壁
const createCurvedWalls = () => {
  // 左侧弧形墙
  createCurvedWall(-SHOWROOM_SIZE / 2, 'left')
  
  // 右侧弧形墙
  createCurvedWall(SHOWROOM_SIZE / 2, 'right')
  
  // 后墙
  createBackWall()
}

// 创建单个弧形墙
const createCurvedWall = (x: number, side: 'left' | 'right') => {
  const wallGroup = new THREE.Group()
  
  // 弧形墙主体 - 白色
  const wallGeometry = new THREE.CylinderGeometry(8, 8, WALL_HEIGHT, 16, 1, true, 0, Math.PI)
  const wallMaterial = new THREE.MeshLambertMaterial({ 
    color: 0xFFFFFF,
    side: THREE.DoubleSide
  })
  const wall = new THREE.Mesh(wallGeometry, wallMaterial)
  wall.rotation.y = side === 'left' ? Math.PI / 2 : -Math.PI / 2
  wall.position.x = side === 'left' ? -4 : 4
  wall.castShadow = true
  wall.receiveShadow = true
  wallGroup.add(wall)
  
  // 红色装饰条纹
  for (let i = 0; i < 3; i++) {
    const stripeGeometry = new THREE.CylinderGeometry(8.1, 8.1, 0.3, 16, 1, true, 0, Math.PI)
    const stripeMaterial = new THREE.MeshLambertMaterial({ 
      color: 0xFF0000,
      side: THREE.DoubleSide
    })
    const stripe = new THREE.Mesh(stripeGeometry, stripeMaterial)
    stripe.rotation.y = side === 'left' ? Math.PI / 2 : -Math.PI / 2
    stripe.position.set(
      side === 'left' ? -4 : 4,
      1 + i * 1.2,
      0
    )
    wallGroup.add(stripe)
  }
  
  scene.add(wallGroup)
}

// 创建后墙
const createBackWall = () => {
  const backWallGeometry = new THREE.BoxGeometry(SHOWROOM_SIZE, WALL_HEIGHT, WALL_THICKNESS)
  const wallMaterial = new THREE.MeshLambertMaterial({ color: 0xFFFFFF })
  const backWall = new THREE.Mesh(backWallGeometry, wallMaterial)
  backWall.position.set(0, WALL_HEIGHT / 2, -SHOWROOM_SIZE / 2)
  backWall.castShadow = true
  backWall.receiveShadow = true
  scene.add(backWall)
}

// 创建大窗户系统
const createLargeWindows = () => {
  // 右侧大窗户
  const windowGroup = new THREE.Group()
  
  // 窗户框架
  const frameGeometry = new THREE.BoxGeometry(0.2, WALL_HEIGHT, 6)
  const frameMaterial = new THREE.MeshLambertMaterial({ color: 0x2C2C2C })
  const frame = new THREE.Mesh(frameGeometry, frameMaterial)
  frame.position.set(SHOWROOM_SIZE / 2 + 0.1, WALL_HEIGHT / 2, 0)
  windowGroup.add(frame)
  
  // 玻璃面板
  const glassGeometry = new THREE.PlaneGeometry(5.8, WALL_HEIGHT - 0.4)
  const glassMaterial = new THREE.MeshLambertMaterial({ 
    color: 0x87CEEB,
    transparent: true,
    opacity: 0.3,
    side: THREE.DoubleSide
  })
  const glass = new THREE.Mesh(glassGeometry, glassMaterial)
  glass.position.set(SHOWROOM_SIZE / 2 + 0.2, WALL_HEIGHT / 2, 0)
  windowGroup.add(glass)
  
  // 窗户分隔条
  for (let i = 0; i < 2; i++) {
    const dividerGeometry = new THREE.BoxGeometry(0.05, WALL_HEIGHT, 0.1)
    const dividerMaterial = new THREE.MeshLambertMaterial({ color: 0x2C2C2C })
    const divider = new THREE.Mesh(dividerGeometry, dividerMaterial)
    divider.position.set(
      SHOWROOM_SIZE / 2 + 0.15,
      WALL_HEIGHT / 2,
      -2 + i * 4
    )
    windowGroup.add(divider)
  }
  
  scene.add(windowGroup)
  
  // 添加天空背景（通过窗户看到）
  createSkyBackground()
}

// 创建天空背景
const createSkyBackground = () => {
  // 天空球体
  const skyGeometry = new THREE.SphereGeometry(50, 32, 32)
  const skyMaterial = new THREE.MeshBasicMaterial({ 
    color: 0x87CEEB,
    side: THREE.BackSide
  })
  const sky = new THREE.Mesh(skyGeometry, skyMaterial)
  scene.add(sky)
  
  // 添加云朵
  for (let i = 0; i < 5; i++) {
    const cloudGeometry = new THREE.SphereGeometry(2 + Math.random() * 3, 8, 6)
    const cloudMaterial = new THREE.MeshBasicMaterial({ 
      color: 0xFFFFFF,
      transparent: true,
      opacity: 0.8
    })
    const cloud = new THREE.Mesh(cloudGeometry, cloudMaterial)
    cloud.position.set(
      20 + Math.random() * 20,
      15 + Math.random() * 10,
      -20 + Math.random() * 40
    )
    scene.add(cloud)
  }
}

// 创建天花板和照明
const createCeilingAndLighting = () => {
  // 天花板
  const ceilingGeometry = new THREE.PlaneGeometry(SHOWROOM_SIZE, SHOWROOM_SIZE)
  const ceilingMaterial = new THREE.MeshLambertMaterial({ color: 0xFFFFFF })
  const ceiling = new THREE.Mesh(ceilingGeometry, ceilingMaterial)
  ceiling.position.y = WALL_HEIGHT
  ceiling.rotation.x = Math.PI / 2
  scene.add(ceiling)
  
  // 嵌入式照明灯
  for (let i = 0; i < 6; i++) {
    const lightGeometry = new THREE.CylinderGeometry(0.5, 0.5, 0.2, 8)
    const lightMaterial = new THREE.MeshLambertMaterial({ 
      color: 0xFFFFFF,
      emissive: 0xFFFFFF,
      emissiveIntensity: 0.3
    })
    const light = new THREE.Mesh(lightGeometry, lightMaterial)
    light.position.set(
      -7.5 + i * 3,
      WALL_HEIGHT - 0.1,
      0
    )
    scene.add(light)
    
    // 添加点光源
    const pointLight = new THREE.PointLight(0xFFFFFF, 0.8, 8)
    pointLight.position.set(
      -7.5 + i * 3,
      WALL_HEIGHT - 0.2,
      0
    )
    scene.add(pointLight)
  }
}



// 创建现代化展示架
const createDisplayCases = () => {
  const caseWidth = 2.5
  const caseHeight = 1.8
  const caseDepth = 0.8
  const caseSpacing = 2.0

  // 创建左排展示架 (3个)
  for (let i = 0; i < 3; i++) {
    const z = -SHOWROOM_SIZE / 2 + caseDepth / 2 + caseSpacing + i * (caseDepth + caseSpacing)
    createModernDisplayStand(-SHOWROOM_SIZE / 2 + caseWidth / 2 + caseSpacing, caseHeight / 2, z, 'left', i)
  }
  
  // 创建右排展示架 (3个)
  for (let i = 0; i < 3; i++) {
    const z = -SHOWROOM_SIZE / 2 + caseDepth / 2 + caseSpacing + i * (caseDepth + caseSpacing)
    createModernDisplayStand(SHOWROOM_SIZE / 2 - caseWidth / 2 - caseSpacing, caseHeight / 2, z, 'right', i)
  }
}

// 创建现代化展示架
const createModernDisplayStand = (x: number, y: number, z: number, side: 'left' | 'right', index: number) => {
  const group = new THREE.Group()
  
  // 展示架底座 - 白色现代风格
  const baseGeometry = new THREE.BoxGeometry(2.7, 0.1, 1.0)
  const baseMaterial = new THREE.MeshLambertMaterial({ color: 0xFFFFFF })
  const base = new THREE.Mesh(baseGeometry, baseMaterial)
  base.position.y = 0.05
  base.castShadow = true
  group.add(base)

  // 展示架主体 - 白色倾斜面板
  const panelGeometry = new THREE.BoxGeometry(2.5, 1.6, 0.05)
  const panelMaterial = new THREE.MeshLambertMaterial({ color: 0xFFFFFF })
  const panel = new THREE.Mesh(panelGeometry, panelMaterial)
  panel.position.y = 0.9
  panel.rotation.x = -Math.PI / 12 // 轻微倾斜
  panel.castShadow = true
  group.add(panel)

  // 金色边框装饰
  const borderGeometry = new THREE.BoxGeometry(2.6, 1.7, 0.08)
  const borderMaterial = new THREE.MeshLambertMaterial({ color: 0xFFD700 })
  const border = new THREE.Mesh(borderGeometry, borderMaterial)
  border.position.y = 0.9
  border.rotation.x = -Math.PI / 12
  border.position.z = -0.015
  group.add(border)

  // 展示架支架
  const standGeometry = new THREE.BoxGeometry(0.1, 1.8, 0.1)
  const standMaterial = new THREE.MeshLambertMaterial({ color: 0x2C2C2C })
  const stand = new THREE.Mesh(standGeometry, standMaterial)
  stand.position.set(0, 0.9, -0.4)
  stand.castShadow = true
  group.add(stand)

  // 添加报纸/文档展品
  addNewspaperExhibits(group, side, index)

  // 展示架照明
  const lightGeometry = new THREE.CylinderGeometry(0.1, 0.1, 0.3, 8)
  const lightMaterial = new THREE.MeshLambertMaterial({ 
    color: 0xFFFFFF,
    emissive: 0xFFFFFF,
    emissiveIntensity: 0.2
  })
  const light = new THREE.Mesh(lightGeometry, lightMaterial)
  light.position.set(0, 1.7, 0)
  group.add(light)

  // 添加点光源
  const pointLight = new THREE.PointLight(0xFFFFFF, 0.6, 3)
  pointLight.position.set(0, 1.7, 0)
  group.add(pointLight)

  group.position.set(x, 0, z)
  scene.add(group)
}

// 添加报纸/文档展品
const addNewspaperExhibits = (group: THREE.Group, side: 'left' | 'right', index: number) => {
  const exhibits = createNewspaperExhibits(side, index)
  
  exhibits.forEach((exhibit, exhibitIndex) => {
    exhibit.position.set(
      -0.8 + exhibitIndex * 0.8,
      0.9,
      0.03
    )
    exhibit.rotation.x = -Math.PI / 12 // 与展示架面板平行
    group.add(exhibit)
  })
}

// 创建报纸/文档展品
const createNewspaperExhibits = (side: 'left' | 'right', index: number) => {
  const exhibits = []
  
  // 创建3个不同的报纸/文档展品
  for (let i = 0; i < 3; i++) {
    const exhibit = createDocumentExhibit(i, side, index)
    exhibits.push(exhibit)
  }
  
  return exhibits
}

// 创建单个文档展品
const createDocumentExhibit = (exhibitIndex: number, side: 'left' | 'right', standIndex: number) => {
  const group = new THREE.Group()
  
  // 文档主体 - 报纸样式
  const documentGeometry = new THREE.PlaneGeometry(0.6, 0.8)
  
  // 创建纹理加载器并直接加载纹理
  const textureLoader = new THREE.TextureLoader()
  const texture = textureLoader.load(bz1Image)
  
  // 创建材质
  const documentMaterial = new THREE.MeshLambertMaterial({ 
    map: texture,
    transparent: true,
    opacity: 0.95
  })
  
  // 添加纹理加载监听
  texture.onLoad = () => {
    console.log('✅ 报纸纹理加载成功')
  }
  
  texture.onError = (error) => {
    console.log('❌ 报纸纹理加载失败:', error)
  }
  
  const document = new THREE.Mesh(documentGeometry, documentMaterial)
  
  // 添加点击事件标识
  document.userData = {
    type: 'newspaper',
    exhibitIndex,
    side,
    standIndex,
    clickable: true
  }
  
  group.add(document)
  
  // 文档边框
  const borderGeometry = new THREE.PlaneGeometry(0.62, 0.82)
  const borderMaterial = new THREE.MeshLambertMaterial({ color: 0x000000 })
  const border = new THREE.Mesh(borderGeometry, borderMaterial)
  border.position.z = -0.001
  group.add(border)
  
  // 标题区域 - 模拟人民日报标题
  const titleGeometry = new THREE.PlaneGeometry(0.5, 0.1)
  const titleMaterial = new THREE.MeshLambertMaterial({ color: 0x000000 })
  const title = new THREE.Mesh(titleGeometry, titleMaterial)
  title.position.set(0, 0.3, 0.001)
  group.add(title)
  
  // 内容区域 - 模拟文字内容
  const contentGeometry = new THREE.PlaneGeometry(0.5, 0.6)
  const contentMaterial = new THREE.MeshLambertMaterial({ color: 0x333333 })
  const content = new THREE.Mesh(contentGeometry, contentMaterial)
  content.position.set(0, -0.1, 0.001)
  group.add(content)
  
  // 添加一些装饰线条模拟文字
  for (let i = 0; i < 8; i++) {
    const lineGeometry = new THREE.PlaneGeometry(0.4, 0.02)
    const lineMaterial = new THREE.MeshLambertMaterial({ color: 0x666666 })
    const line = new THREE.Mesh(lineGeometry, lineMaterial)
    line.position.set(0, -0.15 + i * 0.08, 0.002)
    group.add(line)
  }
  
  // 添加报纸标题文字模拟
  const titleTextGeometry = new THREE.PlaneGeometry(0.45, 0.08)
  const titleTextMaterial = new THREE.MeshLambertMaterial({ color: 0x000000 })
  const titleText = new THREE.Mesh(titleTextGeometry, titleTextMaterial)
  titleText.position.set(0, 0.3, 0.002)
  group.add(titleText)
  
  // 添加日期模拟
  const dateGeometry = new THREE.PlaneGeometry(0.3, 0.05)
  const dateMaterial = new THREE.MeshLambertMaterial({ color: 0x666666 })
  const date = new THREE.Mesh(dateGeometry, dateMaterial)
  date.position.set(0, 0.2, 0.002)
  group.add(date)
  
  // 添加更多文字线条模拟文章内容
  for (let i = 0; i < 6; i++) {
    const textLineGeometry = new THREE.PlaneGeometry(0.35, 0.015)
    const textLineMaterial = new THREE.MeshLambertMaterial({ color: 0x444444 })
    const textLine = new THREE.Mesh(textLineGeometry, textLineMaterial)
    textLine.position.set(0, -0.05 + i * 0.08, 0.002)
    group.add(textLine)
  }
  
  // 添加报纸页码模拟
  const pageNumberGeometry = new THREE.PlaneGeometry(0.1, 0.03)
  const pageNumberMaterial = new THREE.MeshLambertMaterial({ color: 0x888888 })
  const pageNumber = new THREE.Mesh(pageNumberGeometry, pageNumberMaterial)
  pageNumber.position.set(0.2, -0.35, 0.002)
  group.add(pageNumber)
  
  return group
}





// 创建现代化展板
const createDisplayPanels = () => {
  const panelWidth = 3.0
  const panelHeight = 2.0
  const panelDepth = 0.05
  const panelSpacing = 1.0

  // 中间展板 - 主展示区
  createModernDisplayPanel(0, panelHeight / 2, -SHOWROOM_SIZE / 2 + panelDepth / 2 + panelSpacing, 'center')
  
  // 左侧展板
  createModernDisplayPanel(-SHOWROOM_SIZE / 2 + panelWidth / 2 + panelSpacing, panelHeight / 2, -SHOWROOM_SIZE / 2 + panelDepth / 2 + panelSpacing, 'left')
  
  // 右侧展板
  createModernDisplayPanel(SHOWROOM_SIZE / 2 - panelWidth / 2 - panelSpacing, panelHeight / 2, -SHOWROOM_SIZE / 2 + panelDepth / 2 + panelSpacing, 'right')
}

// 创建现代化展板
const createModernDisplayPanel = (x: number, y: number, z: number, position: 'left' | 'center' | 'right') => {
  const group = new THREE.Group()
  
  // 展板主体 - 白色现代风格
  const panelGeometry = new THREE.BoxGeometry(3.0, 2.0, 0.05)
  const panelMaterial = new THREE.MeshLambertMaterial({ color: 0xFFFFFF })
  const panel = new THREE.Mesh(panelGeometry, panelMaterial)
  panel.castShadow = true
  panel.receiveShadow = true
  group.add(panel)

  // 展板边框 - 黑色现代边框
  const borderGeometry = new THREE.BoxGeometry(3.1, 2.1, 0.08)
  const borderMaterial = new THREE.MeshLambertMaterial({ color: 0x2C2C2C })
  const border = new THREE.Mesh(borderGeometry, borderMaterial)
  border.position.z = -0.015
  group.add(border)

  // 展板支架 - 现代金属支架
  const standGeometry = new THREE.BoxGeometry(0.15, 1.0, 0.15)
  const standMaterial = new THREE.MeshLambertMaterial({ color: 0x4A4A4A })
  const stand = new THREE.Mesh(standGeometry, standMaterial)
  stand.position.set(0, -1.0, 0)
  stand.castShadow = true
  group.add(stand)

  // 添加现代化展板内容
  addModernPanelContent(group, position)

  group.position.set(x, 0, z)
  scene.add(group)
}

// 添加现代化展板内容
const addModernPanelContent = (group: THREE.Group, position: 'left' | 'center' | 'right') => {
  const content = new THREE.Group()
  
  switch (position) {
    case 'left':
      // 左侧展板：现代化产品展示
      createModernProductDisplay(content)
      break
    case 'center':
      // 中间展板：现代化品牌展示
      createModernBrandDisplay(content)
      break
    case 'right':
      // 右侧展板：现代化技术展示
      createModernTechDisplay(content)
      break
  }
  
  content.position.z = 0.03
  group.add(content)
}

// 创建现代化产品展示
const createModernProductDisplay = (group: THREE.Group) => {
  // 报纸图标 - 使用真实报纸图片
  const iconGeometry = new THREE.PlaneGeometry(0.8, 1.0)
  
  // 创建纹理加载器并直接加载纹理
  const textureLoader = new THREE.TextureLoader()
  const texture = textureLoader.load(bz1Image)
  
  // 创建材质
  const iconMaterial = new THREE.MeshLambertMaterial({ 
    map: texture,
    transparent: true,
    opacity: 0.95
  })
  
  // 添加纹理加载监听
  texture.onLoad = () => {
    console.log('✅ 展板报纸纹理加载成功')
  }
  
  texture.onError = (error) => {
    console.log('❌ 展板报纸纹理加载失败:', error)
  }
  
  const icon = new THREE.Mesh(iconGeometry, iconMaterial)
  icon.position.set(0, 0.5, 0)
  
  // 添加点击事件标识
  icon.userData = {
    type: 'newspaper',
    exhibitIndex: 0,
    side: 'left',
    standIndex: 0,
    clickable: true
  }
  
  group.add(icon)

  // 报纸边框
  const borderGeometry = new THREE.PlaneGeometry(0.82, 1.02)
  const borderMaterial = new THREE.MeshLambertMaterial({ color: 0x000000 })
  const border = new THREE.Mesh(borderGeometry, borderMaterial)
  border.position.set(0, 0.5, -0.001)
  group.add(border)

  // 产品标题
  const titleGeometry = new THREE.PlaneGeometry(2.0, 0.3)
  const titleMaterial = new THREE.MeshLambertMaterial({ color: 0x333333 })
  const title = new THREE.Mesh(titleGeometry, titleMaterial)
  title.position.set(0, 0.1, 0)
  group.add(title)

  // 产品描述
  const descGeometry = new THREE.PlaneGeometry(2.5, 0.8)
  const descMaterial = new THREE.MeshLambertMaterial({ color: 0x666666 })
  const desc = new THREE.Mesh(descGeometry, descMaterial)
  desc.position.set(0, -0.4, 0)
  group.add(desc)

  // 现代化装饰元素 - 小报纸图标
  for (let i = 0; i < 3; i++) {
    const decorGeometry = new THREE.PlaneGeometry(0.15, 0.2)
    const decorTexture = textureLoader.load(bz1Image)
    const decorMaterial = new THREE.MeshLambertMaterial({ 
      map: decorTexture,
      transparent: true,
      opacity: 0.9
    })
    
    const decor = new THREE.Mesh(decorGeometry, decorMaterial)
    decor.position.set(-0.8 + i * 0.8, -0.8, 0)
    
    // 添加点击事件标识
    decor.userData = {
      type: 'newspaper',
      exhibitIndex: i + 1,
      side: 'left',
      standIndex: 0,
      clickable: true
    }
    
    group.add(decor)
    
    // 小报纸边框
    const decorBorderGeometry = new THREE.PlaneGeometry(0.16, 0.21)
    const decorBorderMaterial = new THREE.MeshLambertMaterial({ color: 0x000000 })
    const decorBorder = new THREE.Mesh(decorBorderGeometry, decorBorderMaterial)
    decorBorder.position.set(-0.8 + i * 0.8, -0.8, -0.001)
    group.add(decorBorder)
  }
}

// 创建现代化品牌展示
const createModernBrandDisplay = (group: THREE.Group) => {
  // 报纸Logo - 使用真实报纸图片
  const logoGeometry = new THREE.PlaneGeometry(1.0, 1.2)
  
  // 创建纹理加载器并直接加载纹理
  const textureLoader = new THREE.TextureLoader()
  const logoTexture = textureLoader.load(bz1Image)
  
  // 创建材质
  const logoMaterial = new THREE.MeshLambertMaterial({ 
    map: logoTexture,
    transparent: true,
    opacity: 0.95
  })
  
  const logo = new THREE.Mesh(logoGeometry, logoMaterial)
  logo.position.set(0, 0.6, 0)
  
  // 添加点击事件标识
  logo.userData = {
    type: 'newspaper',
    exhibitIndex: 0,
    side: 'center',
    standIndex: 0,
    clickable: true
  }
  
  group.add(logo)

  // 报纸边框
  const borderGeometry = new THREE.PlaneGeometry(1.02, 1.22)
  const borderMaterial = new THREE.MeshLambertMaterial({ color: 0x000000 })
  const border = new THREE.Mesh(borderGeometry, borderMaterial)
  border.position.set(0, 0.6, -0.001)
  group.add(border)

  // 品牌标语
  const sloganGeometry = new THREE.PlaneGeometry(2.5, 0.4)
  const sloganMaterial = new THREE.MeshLambertMaterial({ color: 0x000000 })
  const slogan = new THREE.Mesh(sloganGeometry, sloganMaterial)
  slogan.position.set(0, 0.1, 0)
  group.add(slogan)

  // 品牌介绍
  const introGeometry = new THREE.PlaneGeometry(2.5, 0.8)
  const introMaterial = new THREE.MeshLambertMaterial({ color: 0x444444 })
  const intro = new THREE.Mesh(introGeometry, introMaterial)
  intro.position.set(0, -0.4, 0)
  group.add(intro)

  // 现代化装饰线条 - 小报纸图标
  for (let i = 0; i < 4; i++) {
    const lineGeometry = new THREE.PlaneGeometry(0.2, 0.25)
    const lineTexture = textureLoader.load(bz1Image)
    const lineMaterial = new THREE.MeshLambertMaterial({ 
      map: lineTexture,
      transparent: true,
      opacity: 0.9
    })
    
    const line = new THREE.Mesh(lineGeometry, lineMaterial)
    line.position.set(-0.9 + i * 0.6, -0.8, 0)
    
    // 添加点击事件标识
    line.userData = {
      type: 'newspaper',
      exhibitIndex: i + 1,
      side: 'center',
      standIndex: 0,
      clickable: true
    }
    
    group.add(line)
    
    // 小报纸边框
    const lineBorderGeometry = new THREE.PlaneGeometry(0.21, 0.26)
    const lineBorderMaterial = new THREE.MeshLambertMaterial({ color: 0x000000 })
    const lineBorder = new THREE.Mesh(lineBorderGeometry, lineBorderMaterial)
    lineBorder.position.set(-0.9 + i * 0.6, -0.8, -0.001)
    group.add(lineBorder)
  }
}

// 创建现代化技术展示
const createModernTechDisplay = (group: THREE.Group) => {
  // 报纸技术图标 - 使用真实报纸图片
  const techIconGeometry = new THREE.PlaneGeometry(0.8, 1.0)
  
  // 创建纹理加载器并直接加载纹理
  const textureLoader = new THREE.TextureLoader()
  const techTexture = textureLoader.load(bz1Image)
  
  // 创建材质
  const techIconMaterial = new THREE.MeshLambertMaterial({ 
    map: techTexture,
    transparent: true,
    opacity: 0.95
  })
  
  const techIcon = new THREE.Mesh(techIconGeometry, techIconMaterial)
  techIcon.position.set(0, 0.5, 0)
  
  // 添加点击事件标识
  techIcon.userData = {
    type: 'newspaper',
    exhibitIndex: 0,
    side: 'right',
    standIndex: 0,
    clickable: true
  }
  
  group.add(techIcon)

  // 报纸边框
  const borderGeometry = new THREE.PlaneGeometry(0.82, 1.02)
  const borderMaterial = new THREE.MeshLambertMaterial({ color: 0x000000 })
  const border = new THREE.Mesh(borderGeometry, borderMaterial)
  border.position.set(0, 0.5, -0.001)
  group.add(border)

  // 技术标题
  const titleGeometry = new THREE.PlaneGeometry(2.0, 0.3)
  const titleMaterial = new THREE.MeshLambertMaterial({ color: 0x333333 })
  const title = new THREE.Mesh(titleGeometry, titleMaterial)
  title.position.set(0, 0.1, 0)
  group.add(title)

  // 技术参数
  const paramsGeometry = new THREE.PlaneGeometry(2.5, 1.0)
  const paramsMaterial = new THREE.MeshLambertMaterial({ color: 0x666666 })
  const params = new THREE.Mesh(paramsGeometry, paramsMaterial)
  params.position.set(0, -0.5, 0)
  group.add(params)

  // 现代化技术指标 - 小报纸图标
  for (let i = 0; i < 3; i++) {
    const indicatorGeometry = new THREE.PlaneGeometry(0.2, 0.25)
    const indicatorTexture = textureLoader.load(bz1Image)
    const indicatorMaterial = new THREE.MeshLambertMaterial({ 
      map: indicatorTexture,
      transparent: true,
      opacity: 0.9
    })
    
    const indicator = new THREE.Mesh(indicatorGeometry, indicatorMaterial)
    indicator.position.set(-0.8 + i * 0.8, -0.8, 0)
    
    // 添加点击事件标识
    indicator.userData = {
      type: 'newspaper',
      exhibitIndex: i + 1,
      side: 'right',
      standIndex: 0,
      clickable: true
    }
    
    group.add(indicator)
    
    // 小报纸边框
    const indicatorBorderGeometry = new THREE.PlaneGeometry(0.21, 0.26)
    const indicatorBorderMaterial = new THREE.MeshLambertMaterial({ color: 0x000000 })
    const indicatorBorder = new THREE.Mesh(indicatorBorderGeometry, indicatorBorderMaterial)
    indicatorBorder.position.set(-0.8 + i * 0.8, -0.8, -0.001)
    group.add(indicatorBorder)
  }
}

// 创建圆形通道
const createCircularPath = () => {
  const pathRadius = SHOWROOM_SIZE / 2 + 2
  const pathGeometry = new THREE.RingGeometry(pathRadius - 0.5, pathRadius + 0.5, 32)
  const pathMaterial = new THREE.MeshLambertMaterial({ 
    color: 0x90EE90,
    transparent: true,
    opacity: 0.3
  })
  const path = new THREE.Mesh(pathGeometry, pathMaterial)
  path.rotation.x = -Math.PI / 2
  path.position.y = 0.01
  scene.add(path)

  // 添加通道入口标记
  const entranceGeometry = new THREE.CylinderGeometry(0.5, 0.5, 0.1, 8)
  const entranceMaterial = new THREE.MeshLambertMaterial({ color: 0xFF4500 })
  const entrance = new THREE.Mesh(entranceGeometry, entranceMaterial)
  entrance.position.set(0, 0.05, pathRadius)
  scene.add(entrance)
}

// 移动控制
const moveForward = () => {
  const moveSpeed = 0.1
  const angle = rotation.value * Math.PI / 180
  position.x += Math.sin(angle) * moveSpeed
  position.z += Math.cos(angle) * moveSpeed
  
  // 更新相机位置
  camera.position.x = position.x
  camera.position.z = position.z
  controls.target.set(position.x, 0, position.z)
  
  // 更新速度显示
  speed.value = moveSpeed * 10
}

const turnLeft = () => {
  rotation.value -= 2
  camera.rotation.y += Math.PI / 90
}

const turnRight = () => {
  rotation.value += 2
  camera.rotation.y -= Math.PI / 90
}

// 后退
const moveBackward = () => {
  const moveSpeed = 0.1
  const angle = rotation.value * Math.PI / 180
  position.x -= Math.sin(angle) * moveSpeed
  position.z -= Math.cos(angle) * moveSpeed
  
  // 更新相机位置
  camera.position.x = position.x
  camera.position.z = position.z
  controls.target.set(position.x, 0, position.z)
  
  // 更新速度显示
  speed.value = moveSpeed * 10
}

// 重置位置
const resetPosition = () => {
  position.x = 0
  position.z = 0
  rotation.value = 0
  camera.position.set(0, 2, 5)
  camera.rotation.set(0, 0, 0)
  controls.target.set(0, 0, 0)
}

// 全屏切换
const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}

// 线框模式切换
const toggleWireframe = () => {
  scene.traverse((child) => {
    if (child instanceof THREE.Mesh) {
      const material = child.material as THREE.MeshBasicMaterial
      if (material && 'wireframe' in material) {
        material.wireframe = !material.wireframe
      }
    }
  })
}

// 动画循环
const animate = () => {
  animationId = requestAnimationFrame(animate)
  
  // 速度衰减
  if (speed.value > 0) {
    speed.value *= 0.95
    if (speed.value < 0.1) {
      speed.value = 0
    }
  }
  
  controls.update()
  renderer.render(scene, camera)
}

// 窗口大小调整
const handleResize = () => {
  if (camera && renderer && sceneRef.value) {
    const container = sceneRef.value
    const containerWidth = container.clientWidth
    const containerHeight = container.clientHeight
    
    camera.aspect = containerWidth / containerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(containerWidth, containerHeight)
  }
}

// 鼠标点击事件处理
const handleMouseClick = (event: MouseEvent) => {
  if (!camera || !renderer) return
  
  // 计算鼠标位置
  const rect = renderer.domElement.getBoundingClientRect()
  const mouse = new THREE.Vector2()
  mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1
  mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1
  
  // 射线检测
  const raycaster = new THREE.Raycaster()
  raycaster.setFromCamera(mouse, camera)
  
  // 检测与物体的相交
  const intersects = raycaster.intersectObjects(scene.children, true)
  
  console.log('点击检测结果:', intersects.length, '个物体')
  
  if (intersects.length > 0) {
    const intersectedObject = intersects[0].object
    console.log('点击的物体:', intersectedObject)
    console.log('物体userData:', intersectedObject.userData)
    
    // 检查是否是报纸展品
    if (intersectedObject.userData && intersectedObject.userData.clickable && intersectedObject.userData.type === 'newspaper') {
      console.log('✅ 点击了报纸展品:', intersectedObject.userData)
      
      // 简化处理，直接跳转
      console.log('🔄 跳转到报纸详情页面...')
      router.push('/newspaper-detail')
    } else {
      console.log('❌ 不是可点击的报纸展品')
      console.log('物体信息:', {
        hasUserData: !!intersectedObject.userData,
        clickable: intersectedObject.userData?.clickable,
        type: intersectedObject.userData?.type
      })
    }
  } else {
    console.log('❌ 没有检测到点击的物体')
  }
}

// 生命周期
onMounted(() => {
  initScene()
  window.addEventListener('resize', handleResize)
  
  // 模拟加载进度
  const loadInterval = setInterval(() => {
    loadingProgress.value += 10
    if (loadingProgress.value >= 100) {
      loading.value = false
      clearInterval(loadInterval)
    }
  }, 100)
})

onUnmounted(() => {
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
  window.removeEventListener('resize', handleResize)
  
  // 移除点击事件监听器
  if (renderer) {
    renderer.domElement.removeEventListener('click', handleMouseClick)
    renderer.dispose()
  }
})
</script>

<style scoped>
.scene-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: visible;
}

.scene-canvas {
  width: 100%;
  height: 100%;
}



.loading-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.loading-content {
  text-align: center;
  color: white;
}

.loading-content h2 {
  margin-bottom: 20px;
  font-size: 24px;
}

.loading-bar {
  width: 300px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
}

.loading-progress {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #45a049);
  transition: width 0.3s ease;
}
</style>

